<template>
    <div class="box" style="">
        
        <div class="cen_box">
            <el-form style="margin-top:10px;" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="10px" class="demo-ruleForm">
                <el-form-item label="">
                    <h3>欢迎使用</h3>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input placeholder="请输入用户名" v-model="ruleForm.username"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submit('ruleForm')" style="width:100%;"><span v-if="status">登录中...</span><span v-else>登录</span></el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<style scoped>
    div.box{
        background: url('../../assets/lq.gif');
        /* background-color: rgb(243, 243, 244); */
        height:100vh;
        display:flex;
        justify-content: center;
    }
    div.cen_box{
        /* top:100px; */
        width: 330px;
        color:#676a6c;
        text-align: center;
        margin-top:20vh;
    }
</style>
    
<script>
export default {

    data(){

        return {
            ruleForm:{
                username: '',
                password: ''
            },
            rules:{
                username:[
                    {required:true,message:'请输入用户名',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'}
                ]
            },
            status: false
        }

    },
    methods:{

        submit(formName){

            if(this.status){
                return false
            }

            this.$refs[formName].validate((valid) => {

                if(valid){

                    this.status = true

                    let that = this

                    this.$axios.post('/admin.php/login',this.$qs.stringify(this.ruleForm)).then( (res) => {

                        that.status = false

                        if(res.data.code==1){

                            that.$message({
                                type:'success',
                                message:'登录成功,欢迎回来~'
                            })

                            that.$router.push({path:'/admin'})

                        }else{

                            that.$message.error(res.data.msg)

                        }

                    } ).catch( (err) => {

                        that.status = false

                        that.$message.error('网络繁忙~')
                    
                    } )

                }else{

                    return false

                }

            })
        }

    }
    
}
</script>